import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:jetour_line/utils/aha_utils.dart';
import 'package:jetour_line/utils/extension_int.dart';

import '../../base_widget/base_image.dart';
import '../../my_colors.dart';

class EndTravelTagWidget extends StatefulWidget {
  List<String>? tags;
  final Function tagsCallBack;

  EndTravelTagWidget({super.key, required this.tagsCallBack, this.tags});

  @override
  State<EndTravelTagWidget> createState() => _EndTravelTagWidgetState();
}

class _EndTravelTagWidgetState extends State<EndTravelTagWidget> {
  int tagsCount = 6;
  int tagslength = 10;

  List<String> tags = [];
  final TextEditingController _controller = TextEditingController();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    if (widget.tags!.isNotEmpty) {
      tags = widget.tags!;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(left: 32.px, right: 32.px),
      child: Container(
        width: double.infinity,
        color: Colors.transparent,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Row(
              children: [
                SizedBox(
                  height: 94.px,
                ),
                Expanded(
                    child: Text(
                  '添加标签',
                  style: TextStyle(
                      fontSize: 32.px,
                      color: MyColors.color1A1A1A,
                      fontWeight: FontWeight.w600),
                )),
                Text(
                  '输入时使用空格来区分标签',
                  style: TextStyle(
                    fontSize: 24.px,
                    color: MyColors.color999999,
                  ),
                ),
              ],
            ),
            tagsWidget(),
          ],
        ),
      ),
    );
  }

  Widget tagsWidget() {
    return ClipRRect(
      borderRadius: BorderRadius.all(Radius.circular(4.px)),
      child: GestureDetector(
        onTap: () {
          if (tags.length == tagsCount) {
            AhaUtils.showTxt("最多输入$tagsCount个标签");
          }
        },
        child: Container(
          width: double.infinity,
          color: MyColors.colorF1F1F1,
          child: Padding(
            padding: EdgeInsets.only(left: 10.px, top: 32.px, bottom: 32.px),
            child: Wrap(
              alignment: WrapAlignment.start,
              spacing: 11.px,
              runSpacing: 11.px,
              children: [
                for (int i = 0; i < tags.length + 1; i++) tagItemWidget(i)
              ],
            ),
          ),
        ),
      ),
    );
  }

  bool textFieldisInput = false;
  String txtValue = '';

  Widget tagItemWidget(int i) {
    TextSpan span = TextSpan(
      text: txtValue,
      style: TextStyle(fontSize: 28.px), // 设置文本样式
    );
    TextPainter painter = TextPainter(
      text: span,
      textDirection: TextDirection.ltr,
    );
    painter.layout(); // 布局文本
    double textWidth = painter.width; // 获取文本宽度
    print('textWidth====$textWidth');

    if (i < tags.length) {
      return GestureDetector(
        onTap: () {},
        child: ClipRRect(
          borderRadius: BorderRadius.all(Radius.circular(4.px)),
          child: Stack(
            children: [
              Container(
                color: Colors.white,
                child: Padding(
                  padding: EdgeInsets.only(
                      left: 16.px, right: 60.px, top: 16.px, bottom: 16.px),
                  child: Text(
                    tags[i],
                    style: TextStyle(
                      fontSize: 30.px,
                    ),
                  ),
                ),
              ),
              Positioned(
                  top: 0.px,
                  right: 0.px,
                  child: GestureDetector(
                    onTap: () {
                      tags.removeAt(i);
                      widget.tagsCallBack(tags);
                      setState(() {});
                    },
                    child: Container(
                      color: Colors.transparent,
                      padding: EdgeInsets.only(
                          left: 26.px, right: 16.px, top: 22.px, bottom: 22.px),
                      child: ClipRRect(
                        borderRadius: BorderRadius.all(Radius.circular(14.px)),
                        child: Opacity(
                          opacity: 0.8,
                          child: Container(
                            alignment: Alignment.center,
                            width: 28.px,
                            height: 28.px,
                            color: MyColors.color26282D,
                            child: BaseImage(
                              image: 'lsgj_btn_closewh',
                              width: 15.px,
                              height: 15.px,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ))
            ],
          ),
        ),
      );
    } else {
      if (tags.length >= tagsCount) {
        return const SizedBox();
      } else {
        return Container(
          decoration: BoxDecoration(
            color: Colors.transparent,
            //设置四周圆角 角度
            borderRadius: BorderRadius.all(Radius.circular(5.px)),
            //设置四周边框
            border: Border.all(
                width: 1,
                color:
                    textFieldisInput ? MyColors.appColor : Colors.transparent),
          ),
          width: 35 * txtValue.length == 0
              ? tags.isEmpty
                  ? double.infinity
                  : 300.px
              : (textWidth + 60.px),
          padding: EdgeInsets.only(
              top: 16.px, bottom: 16.px, left: 10.px, right: 10.px),
          height: 70.px,
          child: TextField(
            cursorColor: MyColors.appColor,
            controller: _controller,
            onChanged: (value) {
              String lastvalue =
                  value.isEmpty ? "" : value.substring(value.length - 1);
              if (value.length > tagslength &&
                  !(value.length == tagslength + 1 && lastvalue == " ")) {
                AhaUtils.showTxt("最多输入$tagslength个字");
                _controller.text = value.substring(0, tagslength);
                _controller.selection = TextSelection.fromPosition(
                  TextPosition(offset: _controller.text.length),
                );
              } else {
                if (lastvalue == ' ') {
                  String addTag = value.substring(0, value.length - 1);
                  for (int i = 0; i < tags.length; i++) {
                    if (tags[i] == addTag) {
                      AhaUtils.showTxt("不能添加重复标签");
                      _controller.text = addTag;
                      _controller.selection = TextSelection.fromPosition(
                        TextPosition(offset: _controller.text.length),
                      );
                      return;
                    }
                  }
                  if(addTag == " " || addTag.isEmpty){
                    _controller.text = '';
                    return;
                  }
                  tags.add(addTag);
                  _controller.text = '';
                }
              }
              if (value.isEmpty || lastvalue == ' ') {
                textFieldisInput = false;
              } else {
                textFieldisInput = true;
              }
              txtValue = _controller.text;
              widget.tagsCallBack(tags);
              setState(() {});
            },
            style: TextStyle(fontSize: 28.px, color: MyColors.color333333),
            decoration: InputDecoration(
              counterText: '',
              border: InputBorder.none,
              suffixStyle:
                  TextStyle(fontSize: 28.px, color: MyColors.color999999),
              hintText: '填写标签',
              isDense: true,
              contentPadding: EdgeInsets.fromLTRB(8, 0, 0, 0),
            ),
          ),
        );
      }
    }
  }
}
